<template>
  <div class="group">
    <div class="otherOptions">
      <el-checkbox v-model="groDATA.MultipleState">开启多选</el-checkbox>
      <el-button :disabled="!groDATA.MultipleState" @click="POSTSAIX()">进行多选搜索</el-button>
    </div>
    <div class="group">
      <div v-for="item in groDATA.proList" :key="item.id" class="romBox">
        <span class="head">{{ item.name }}：</span>
        <ul>
          <li>
            <span @click="ClearSelectionData(item.id)">不限</span>
          </li>
          <li v-for="listS in item.list" :key="listS.id">
            <span
              @click="getDataId(item.id,listS.id)"
              :class="{'selected':selectedJS(listS.id)}"
              :ref="'i'+listS.id"
            >{{ item.id }}-{{ listS.id }}-{{ listS.name }}</span>
          </li>
        </ul>
      </div>
      <div class="romBox">
        <span class="head">价格：</span>
        <ul>
          <li>
            <span @click="groDATA.JGflg = -1">不限</span>
          </li>
          <li>
            <span :class="{'selected':groDATA.JGflg == 0}" @click="selectefJG(0)">0-1999</span>
          </li>
          <li>
            <span :class="{'selected':groDATA.JGflg == 2}" @click="selectefJG(2)">2000-3999</span>
          </li>
          <li>
            <span :class="{'selected':groDATA.JGflg == 4}" @click="selectefJG(4)">4000-5999</span>
          </li>
          <li>
            <input v-model="groDATA.JGmin" type="text" />--
            <input v-model="groDATA.JGmax" type="text" />
            <span @click="JGGet()">确定</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      groDATA: {
        proList: [],
        ClassificationList: {},
        getlist: [],
        MultipleState: false,
        FID: "",
        JGflg: -1,
        JGmin: 0,
        JGmax: 0,
        maxID: null
      }
    };
  },

  watch: {
    "groDATA.MultipleState": function() {
      if (!this.groDATA.MultipleState) {
        this.CleanData();
      }
    },
    groDATA: {
      handler(newName, oldName) {
        this.$store.commit("updataGroDATA", this.groDATA);
      },
      immediate: true,
      deep: true
    },
    $route(to, from) {
      this.CleanData();
      let obj = {
        c1: this.$route.params.c1,
        c2: this.$route.params.c2,
        c3: this.$route.params.c3
      };
      this.getKind(obj);
      // this.createdSynchrin();
    }
  },
  computed: {},
  created: function() {
    this.groDATA = this.$store.state.commonDATA.groDATA;
    console.log(this.$route.params.c3);
    let obj = {
      c1: this.$route.params.c1,
      c2: this.$route.params.c2,
      c3: this.$route.params.c3
    };
    this.getKind(obj);
    // this.createdSynchrin();
  },
  methods: {
    //首次打开同步部分数据 并且发送请求
    createdSynchrin() {
      if (this.$route.params.c2 != "no" && this.$route.params.c3 != "no") {
        this.groDATA.ClassificationList[this.$route.params.c2] = [
          this.$route.params.c3
        ];
        this.DataSynchronization();
        this.POSTSAIX();
      } else if (this.$route.params.c1 != "no") {
        this.groDATA.maxID = this.$route.params.c1;
        this.POSTSAIX();
      }
    },
    //首次加载获取分类信息 以及商品
    getKind(a, b) {
      this.$api.mallAPI.getKind(a, b).then(res => {
        var data = res.data.commodity;
        var a = {};
        for (var i in data) {
          if (data[i].name == "品牌") {
            a = data[0];
            data[0] = data[i];
            data[i] = a;
            break;
          }
        }
        this.groDATA.proList = data;
        this.$store.commit("updataCarsMgsList", res.data.list);
      });
    },
    //标签选择
    getDataId(a, b) {
      var f = this.groDATA.getlist.indexOf(b);
      if (f != -1) {
        //  在高亮列表 删除这个index
        this.groDATA.getlist.splice(f, 1);
        //  在 a 中删除 index
        if (this.groDATA.ClassificationList[a].length <= 1) {
          delete this.groDATA.ClassificationList[a];
        } else {
          this.groDATA.ClassificationList[a].splice(
            this.groDATA.ClassificationList[a].indexOf(b),
            1
          );
        }
        this.DataSynchronization();
        this.POSTSAIX();
      } else {
        if (this.groDATA.ClassificationList.hasOwnProperty(a)) {
          // 判断clas中又没有a
          if (this.groDATA.MultipleState) {
            this.groDATA.ClassificationList[a].push(b); // 添加index到a的值;
            this.DataSynchronization();
            // this.groDATA.getlist.push(b); // 添加a到高亮列表;
          } else {
            this.groDATA.ClassificationList[a] = [b];
            this.groDATA.getlist.splice(
              this.groDATA.getlist.indexOf(this.groDATA.FID),
              1
            );
            // this.groDATA.getlist.push(b);
            this.DataSynchronization();
            this.POSTSAIX();
          }
        } else {
          this.groDATA.ClassificationList[a] = [b];
          if (!this.groDATA.MultipleState) {
            this.DataSynchronization();
            this.POSTSAIX();
          }
        }
      }
    },
    //数据同步
    DataSynchronization() {
      this.groDATA.getlist = [];
      for (var key in this.groDATA.ClassificationList) {
        var item = this.groDATA.ClassificationList[key];
        this.groDATA.getlist = this.groDATA.getlist.concat(item);
      }
      console.log("数据同步", this.groDATA.getlist);
    },
    // 触发 不限 按钮
    ClearSelectionData(a) {
      if (this.groDATA.ClassificationList[a]) {
        delete this.groDATA.ClassificationList[a];
        this.DataSynchronization();
        if (!this.groDATA.MultipleState) this.POSTSAIX();
      }
    },
    //控制高亮样式
    selectedJS(index) {
      let f = this.groDATA.getlist.indexOf(index);
      if (f == -1) {
        return false;
      } else if (f > -1) {
        return true;
      }
    },
    //调整价格
    selectefJG(index) {
      this.groDATA.JGflg = index;
      this.groDATA.JGmin = index * 1000;
      this.groDATA.JGmax = index * 1000 + 1999;
      this.POSTSAIX();
    },
    // 验证输入的价格是否正确
    JGGet() {
      this.POSTSAIX();
    },
    // 页面内清空数据
    CleanData() {
      this.groDATA.ClassificationList = {};
      this.groDATA.getlist = [];
      this.groDATA.JGflg = -1;
    },
    //发送筛选请求
    POSTSAIX() {
      // 返回分类数据
      this.$api.commonAPI
        .getElectricCars({
          list: this.$store.state.commonDATA.groDATA.getlist,
          pageNum: this.$store.state.commonDATA.pageNum,
          priceMax: this.$store.state.commonDATA.groDATA.JGmax,
          priceMin: this.$store.state.commonDATA.groDATA.JGmin,
          orderStatus: this.$store.state.commonDATA.orderStatus
        })
        .then(res => {
          // this.getlist =
        });
      this.$store.commit("getlistApiUpadta", [
        {
          title: "品牌",
          id: "2554",
          list: [
            { name: "品牌1", id: "16" },
            { name: "品牌2", id: "17" },
            { name: "品牌3", id: "18" },
            { name: "品牌4", id: "19" },
            { name: "品牌5", id: "20" },
            { name: "品牌6", id: "201" }
          ]
        },
        {
          title: "电池类型",
          id: "2551",
          list: [{ name: "铅酸电池", id: "4" }, { name: "锂电池", id: "5" }]
        }
      ]);
      //返回的分页数据
      this.$store.commit("pageUpdata", {
        total: 1000, //一共的数据
        list: [], //商品数据列表
        pageNum: 2, //当前页码
        pageSize: 20 //一页多少条数据
      });
    }
  },
  components: {},
  beforeDestroy: function() {
    //清空数据
    this.$store.commit("electricCarsClean");
  }
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.selected {
  color: white;
  background-color: $main-color12;
}
.group {
  border: 1px solid #e8e8e8;
  margin-top: -1px;
  padding: 8px;
  font-size: 13px;
  .romBox {
    // height: 250px;
    border-bottom: 1px dashed #dedede;
    padding-top: 5px;
    ul {
      // display: inline;
      // float: left;
      width: 1000px;
      position: relative;
      left: 70px;
      top: -15px;
      display: flex;
      flex-wrap: wrap;
      li {
        // float: left;
        display: inline;
        margin-right: 30px;
      }
      li span:hover {
        color: white;
        background-color: $main-color12;
        cursor: pointer;
      }
    }
    .head {
      color: $alink;
      font-size: 13px;
      text-align: right;
      cursor: pointer;
    }
    .foot {
      position: relative;
      display: inline;
      right: -1097px;
      top: -32px; //经常有问题
      cursor: pointer;
    }

    input {
      width: 70px;
    }
  }
}
.otherOptions {
  text-align: right;
  margin-bottom: 5px;
  .el-button {
    color: rgb(204, 57, 57);
  }
  button {
    width: 90px;
    height: 30px;
    margin-left: 15px;
    // margin-right: 30px;
  }
}
</style>
